import React from 'react';
import cx from 'classnames';
import { bool, number, string } from 'prop-types';

import './ListItem.less';
import Rate from '../rate/Rate';

const propTypes = {
  serial: number.isRequired,
  id: string.isRequired,
  title: string.isRequired,
  imageUrl: string.isRequired,
  category: string.isRequired,
  rate: number.isRequired,
  isOdd: bool,
};

const defaultProps = {
  isOdd: true,
};

const ListItem = ({ serial, id, title, imageUrl, category, rate, isOdd }) => (
  <div className="list-item">
    <div className="item-rank">{serial}</div>
    <div className={cx('item-img', { circle: isOdd })}>
      <img src={imageUrl} alt={title} />
    </div>
    <div className="item-info">
      <div className="item-title">{title}</div>
      <div className="item-category">{category}</div>
      <Rate value={rate} />
      <span className="rateCount">{` (${parseInt(Math.random() * 100)})`}</span>
    </div>
  </div>
);

ListItem.propTypes = propTypes;
ListItem.defaultProps = defaultProps;
export default ListItem;
